<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <meta name="renderer" content="webkit">
    <title>添加和编辑栏目</title>

 <style type="text/css">
    *{
      font-size:14px;
      margin: 0px;
      padding: 0px; 
    }
    ul{
      list-style-type: none;
    }
    .all{
      padding-top: 50px;
      height: auto;
      width:100%;
      min-height:700px;
      background:url(image/nav_bg.jpg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .left_div{
      height: auto;
      width: 40%;
      min-height:400px;
      float:left;  
      border-right: 1px dashed #000;  
    }
    .inner_ul{
      margin: 20px auto;
      width:45%;
      min-height: 200px;
      padding: 20px 0 0 25px;
      overflow: hidden;
      word-spacing: 2px;
      float: right;
    }
     .parent{
        min-height:20px;
        width: 100%;
    }

    .parent img{
      float: left;
      height: 14px;
      width: 20px;
      margin-right:10px;
      position: relative;
      top:3px;
    }
    .parent a{
        text-decoration: none;
        line-height: 20px;
        color: #000;
        display: block;
         overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
   
    .ul{
      margin-left:10px;
    }
    .ul span{
      color: red;
    }
     .parent li{
        width:100%;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        color: red;
        cursor: pointer;
    }
     li span:hover{
       color: blue;
   }
    .right_div{
       float: right;
       height: auto;
       min-height: 300px;
       width: 59%;
    }

    form{
       margin: 0px auto;
       position:relative; 
       width: 60%;
       padding: 20px 0px 20px 0px;  
       opacity: 0.9px;
       float:left;
        z-index: 10;
        margin-left: 5%;
        margin-top: 75px;
    }
    form span{
      font-weight: bold;
    }
    .buttondiv{
      float:right;
      height: 200px;
      width: 35%;

    }
    .save{
      width:45px;
      height:40px;
      cursor: pointer;
      margin-top:10px;
      display: block;
    }
    .text{
      margin-bottom: 20px;
      width: 200px;
      height: 22px;
      margin-top: 5px;
      padding-left: 5px;
      margin-left: 5px;
    }
    .button{
      height: 25px;
      width: 100px;
      text-align: center;
      line-height: 20px;
      font-size: 13px;
      font-weight:bold;
      word-spacing: 2px;
      margin-top: 20px;
      position: relative;
      left: 35px;
    }
    select{
      margin-bottom: 20px;
      width: 205px;
      height: 24px;
      margin-top: 5px;
      padding-left: 5px;
      margin-left: 5px;
    }
    .secondrank{
      color:red;
      padding-left:25px;
    }
    .info{
        padding-left: 15px;
        color: red;
    }
 </style>
</head>
<body>

      <div class="all">
           <div class="left_div">
                 <ul class="inner_ul">
                 </ul>
              
           </div>
           <div class="right_div">
              <form >
              <center>
                 <span>栏目名称:</span>
                 <input type="text" name="name" class="text" id="name"></br>
                 <span>父 栏 目:</span>
                 <select name="parent" id="parent" >
                        <option data="0" id="firstrank">一级栏目</option> 
                 </select></br>
                 <span>栏目顺序:</span>
                 <input type="number" name="order" class="text" id="order"></br>
                 <span>数据类型:</span>
                 <select name="type" id="type">
                        <option id="1">单页模型</option> 
                        <option id="2">文章模型</option> 
                        <option id="3">下载模型</option>   
                        <option id="4">作品模型</option> 
                        <option id="5">人物模型</option> 
                        <option id="6">图文模型</option> 
                 </select></br>
                 <span>栏目描述:</span>
                 <input type="text" name="descration" class="text" id="descration">  
                 <div class="info"></div>        
               </center>            
             </form>
             <div class="buttondiv">
                  <img src="image/save.png" class="save" style="margin-top:135px;" id="update">
                  <img src="image/save1.png" class="save" id="delete">
            </div>
         </div>
      </div>
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="../public/js/serverIp.js"></script>
<script type="text/javascript">

  $(function(){      

      $("#name").focus(function(){
           $(".info").html("");
      })

       $.post(serverIp+"/Scauaie.com/artical/coumns/show",null,function(data){
            var dataobj=JSON.parse(data);
            $.each(dataobj,function(index,value){
                   $(".inner_ul").append("<li class='parent "+index+"' data='"+value.id+"' order='"+value.order+"' modelId='"+value.modelId+"' descration='"+value.statement+"' ></li>");
                   $("."+index).append("<a href='javascript:;'><img src='image/narrow_forright.png'><span>"+value.name+"</span></a>");
                   $("."+index).append("<ul class='ul 1000'></ul>");
                   $("#parent").append("<option data='"+value.id+"' order='"+value.order+"' modelId='"+value.modelId+"' descration='"+value.statement+"' >"+value.name+"</option>");
            })
          
             var hovernumber=1;
             function option_hover(){
                  var datastr="id="+$(this).attr("data");
                  var thisobj=$(this);
                  var line=thisobj.val().match(/\-*/gi);
                  $.post(serverIp+"/Scauaie.com/artical/coumns/showchild",datastr,function(data){              
                        var dataobj=JSON.parse(data);
                        $.each(dataobj,function(index,value){
                             thisobj.after("<option class='secondrank "+hovernumber+"' data='"+value.id+"' >--"+line[0]+value.name+"</option>");
                        })  
                        thisobj.nextAll("."+hovernumber).bind("hover",option_hover);
                        hovernumber++;              
                  },"html");
                  $(this).unbind("hover");
             }
             $("#parent").find("option").not("#firstrank").bind("hover",option_hover);


             var clicknumber=100;
             var ultime=1000;
             var ulinstead;
             function click(){

                   var parent=$(this).parent();
                    var self=$(this);
                   var modelId=parent.attr("modelId");
                   var parentId=parent.parent().parent().attr("data");
                   if(parentId==undefined){    //一级栏目
                        $("#parent").find("option[data='0']").attr("selected",true); //使对应父栏目被选中
                   }else{
                      $("#parent").find("option[data='"+parentId+"']").attr("selected",true); //使对应父栏目被选中
                   }
                                     
                   $("#name").val($(this).find("span").html());  //填充栏目名称
                   $("#name").attr("data",parent.attr("data"));  
                   $("#parent").find("option").trigger("mouseenter");//手动触发hover时间
                   $("#order").val(parent.attr("order"));
                   $("#descration").val(parent.attr("descration"));
                   $("#type").find("option[id='"+modelId+"']").attr("selected",true); //使对应父栏目被选中

                   
                   var datastr="id="+parent.attr("data");
                   $.post(serverIp+"/Scauaie.com/artical/coumns/showchild",datastr,function(data){
                        var dataobj=JSON.parse(data);
                        ulinstead=ultime;
                        if(ultime!=1000){
                            var arr=self.next().attr("class").split(" ");
                            ultime=arr[1];
                        }
                        $.each(dataobj,function(index,value){
                             var index=index-100;
                             parent.find("."+ultime).append("<li class='secondclick "+clicknumber+' '+index+"' data='"+value.id+"' order='"+value.order+"' modelId='"+value.modelId+"' descration='"+value.statement+"'><a href='javascript:;'><span>--"+value.name+"</span></a></li>");
                             $("."+ultime).find("."+index).append("<ul class='ul "+(--ulinstead)+"'></ul>");
                        })
                        ultime=ulinstead;
                        parent.find("."+clicknumber).find("a").bind("click",click);
                        parent.find("."+clicknumber).find("a").trigger("click");
                        clicknumber++;


                   },"html");
                   $(this).unbind("click");
                   $(this).bind("click",fill);
             }

             function fill(){   
                   var parent=$(this).parent();
                   var currentId=parent.attr("data");  
                   var modelId=parent.attr("modelId");
                   var parentId=parent.parent().parent().attr("data");
                   if(parentId==undefined){    //一级栏目
                        $("#parent").find("option[data='0']").attr("selected",true); //使对应父栏目被选中
                   }else{
                      $("#parent").find("option[data='"+parentId+"']").attr("selected",true); //使对应父栏目被选中
                   }
                                     
                   $("#name").val($(this).find("span").html());  //填充栏目名称
                   $("#name").attr("data",parent.attr("data"));  
                   $("#parent").find("option").trigger("mouseenter");//手动触发hover时间
                   $("#order").val(parent.attr("order"));
                   $("#descration").val(parent.attr("descration"));
                   $("#type").find("option[id='"+modelId+"']").attr("selected",true); //使对应父栏目被选中            
                   
             }

             $(".parent").find("a").bind("click",click);
             $(".parent").find("a").trigger("click");

       },"html")

     
     //提交修改
      $("#update").click(function(){
           var name=$("#name").val().replace(/\-/gi,"");
           var id=$("#name").attr("data");
           var parentId=$("#parent").find('option:selected').attr('data');
           var order=$("#order").val();
           var modelId=$("#type").find('option:selected').attr('id');
           var descration=$("#descration").val();
           
           if(name&&parentId&&order&&modelId&&descration){
               var datastr="name="+name+"&id="+id+"&parentId="+parentId+"&order="+order+"&modelId="+modelId+"&statement="+descration;
               $.post(serverIp+"/Scauaie.com/artical/coumns/edit",datastr,function(data){               
                      var dataobj=JSON.parse(data);
                      if(dataobj.bool=="true"){
                          $(".info").html("修改成功");
                          window.location.href="edit_nav.html";
                      }else{
                         $(".info").html("修改失败，请再尝试一遍！");
                      }
               },"html")
          }else{
             alert( "请先填完整信息");
          }    
      })

       //删除栏目
      $("#delete").click(function(){
               var datastr="id="+$("#name").attr("data");
               $.post(serverIp+"/Scauaie.com/artical/coumns/delete",datastr,function(data){               
                      var dataobj=JSON.parse(data);
                      if(dataobj.bool=="true"){
                          $(".info").html("删除成功");
                           window.location.href="edit_nav.html";
                      }else{
                         $(".info").html("修改失败，请再尝试一遍！");
                      }
               },"html")
      })
     
     

  })
    
</script>
</body>

</html>